<template>
  <div>
    <!--查询条件-->
    <RoleManageQuery
      :query="query"
      :loadTableList="loadTableList"
      :removeQueryField="removeQueryField"
      :clearQuery="clearQuery"
    />
    <!--表格，包含工具栏和分页-->
    <RoleManageTable
      :table="table"
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      @addRow="addRow"
      @editRow="editRow"
      @permissionManage="permissionManage"
    />
    <RoleAddOrEditDialog
      ref="dialogRef"
      :action="action"
    />
    <RolePermissionManage
      ref="rolePermissionDialogRef"
      :loadTableList="loadTableList"
    />
  </div>
</template>

<script lang="ts" setup>
// 导入角色列表
import RoleManageTable from '@/views/page/authority/rolemanage/RoleManageTable.vue';
import RoleManageQuery from '@/views/page/authority/rolemanage/RoleManageQuery.vue';
import RoleAddOrEditDialog from '@/views/page/authority/rolemanage/RoleAddOrEditDialog.vue';
import RolePermissionManage from '@/views/page/authority/rolemanage/RolePermissionManage.vue';

import { getCurrentInstance, provide, ref } from 'vue';
import useTableList from '@/api/common/useTableList';
import { ResponseData } from '@/types/interface/base_interface';
import { Role } from '@/types/interface/auth_interface';
import Request from '@/api/request/request';
import { AxiosPromise } from 'axios';

const { proxy } = getCurrentInstance();
// 表格工具必备参数
const {
  table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage,
} = useTableList(proxy.$urls.API_URL_BACKSTAGE_ROLE_MANAGE);

// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);

// 表单对象，决定添加编辑表单的action。
const action = ref('post');
// 打开基础对话框
const dialogRef = ref();
// 点击添加角色按钮
const addRow = () => {
  const form = {
    level: 100,
    defaultRole: false,
    enabled: true,
  };
  action.value = 'post';
  dialogRef.value!.openDialog(form);
};

// 编辑单行记录。
const editRow = async (row:Role) => {
  action.value = 'put';
  // 读取账户信息
  const resData:any = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_ROLE_MANAGE}/${row.id}`).get();
  if (resData.success) {
    const form = resData.data;
    dialogRef.value!.openDialog(JSON.parse(JSON.stringify(form)));
  }
};

// 菜单分配处理
const rolePermissionDialogRef = ref(); // 分配菜单对话框
// 当点击分配菜单时
const permissionManage = (role: Role) => {
  rolePermissionDialogRef.value.openDialog(role);
};
</script>
<style lang="scss" scoped>

</style>
